<template>
  <div class="personalBox">
    <!-- 用户头像区 -->
    <div class="userBox">
      <div class="avatar">
        <img src="../../assets/touxiang.png" alt="">
      </div>
      <div class="user">
        <span>{{userInfo.realName}}</span>
        <span>{{userInfo.phone}}</span>
      </div>
      <div class="arrowBox"><span class="iconfont iconarrow-right arrow"></span></div>
    </div>
    <!-- 功能条目区 -->
    <div class="itemBox">
      <div class="item" @click="goPaymentRecordsPage">
        <div>
          <span class="iconfont icon1 myicon"></span>
          <span>缴交记录</span>
        </div>
        <div class="itemArrow">
          <span class="iconfont iconarrow-right"></span>
        </div>
      </div>
      <div class="item" @click="goInvoiceRcordsPage">
        <div>
          <span class="iconfont iconkaipiao myicon"></span>
          <span>开票记录</span>
        </div>
        <div class="itemArrow">
          <span class="iconfont iconarrow-right"></span>
        </div>
      </div>
      <div class="item" @click="goChangePwdPage">
        <div>
          <span class="iconfont iconxiugaimima myicon"></span>
          <span>修改密码</span>
        </div>
        <div class="itemArrow">
          <span class="iconfont iconarrow-right"></span>
        </div>
      </div>
    </div>
    <!-- 退出登入区 -->
    <div class="logout" @click="logout">退出登入</div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      // 用户信息
      userInfo: ''
    }
  },
  async created () {
    const { data: res } = await this.$http.get('user/infomation')
    if (res.code !== 0) {
      Toast('用户信息查询失败！')
      return
    }
    console.log(res)
    this.userInfo = res.data
  },
  methods: {
    // 跳转到缴费记录页面
    goPaymentRecordsPage () {
      console.log('aaaa')
      this.$router.push('/paymentRecords')
    },
    // 退出登入
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 跳转到开票记录界面
    goInvoiceRcordsPage () {
      this.$router.push('/invoiceRecords')
    },
    // 跳转到修改密码页面
    goChangePwdPage () {
      this.$router.push('/changePwd')
    }
  }

}
</script>

<style lang="less" scoped>
  .personalBox {
    position: relative;
    height: 100%;
  }
  .userBox {
    position: relative;
    padding-top: 20px;
    height: 101px;
    // background-color: #ccc;
    border-bottom: 1px solid #EBEBEB;

    .avatar {
      float: left;
      width: 64px;
      height: 64px;
      margin: 18px 10px 18px 18px;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .user {
      float: left;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      span:nth-child(1) {
        font-size: 16px;
        color: #333;
      }
      span:nth-child(2) {
        font-size: 14px;
        color: #666;
      }
    }
    .arrowBox {
      float: right;
      position: relative;
      height: 100%;
      .arrow {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        color: #bbb;
      }
    }
  }

  .itemBox {
    margin-top: 18px;
    div:nth-child(3) {
      margin-top: 16px;
    }
  }
  .item {
    display: flex;
    height: 51px;
    align-items: center;
    // background-color: #ccc;
    font-size: 14px;
    color: #333;
    >div {
      flex: 1;
    }
    .myicon {
      margin: 0 8px;
      color: #F7B241;
      font-size: 20px;
    }
    .itemArrow {
      position: relative;
      height: 22px;
      >span {
       position: absolute;
       right: 15px;
       font-size: 22px;
       color: #bbb;
      }
    }
  }
  .logout {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 75px;
    color: #f59E0E;
    font-size: 13px;
  }
</style>
